/*
 * @Author: 九阳
 * @Date: 2022-08-03 14:05:31
 * @LastEditors: 九阳
 * @LastEditTime: 2022-08-16 09:48:45
 */
import { createApp, App } from "vue";
// 引入 loading 组件
import Loading from "@/components/loading/loading.vue";

// 定义 loading 指令
export default (app: App<Element>) => {
  app.directive("loading", {
    mounted(el: any, { value }: any) {
      // 创建 loading 组件构造函数
      const LoadingCtor = createApp(Loading);
      // 组件挂载
      el.instance = LoadingCtor.mount(document.createElement("div"));
      // 传入值为 true 时才展示
      if (value) {
        // 将组件挂载到绑定指令的元素上
        append(el);
      }
    },
    // 当传进来的值更新的时候触发
    updated(el: any, { value }: any) {
      value ? append(el) : remove(el);
    },
  });
};
// export default (app: App<Element>) => {
//     //自定义组件
//     app.directive("loading", {
//         mounted (el: any, binding: any) {
//             // 创建 loading 组件构造函数
//             const LoadingCtor = createApp(Loading);
//             // 组件挂载
//             el.instance = LoadingCtor.mount(document.createElement('div'));
//             // 传入值为 true 时才展示
//             if (binding.value) {
//                 // 将组件挂载到绑定指令的元素上
//                 append(el)
//             }
//         },
//         update(el: any, binding: any) {
//             // 值更新时进行操作
//             if (binding.value !== binding.oldValue) {
//                 binding.value ? append(el) : remove(el)
//             }
//         }
//     });
// };

const append = (el: any) => {
  el.appendChild(el.instance.$el);
};

const remove = (el: any) => {
  el.removeChild(el.instance.$el);
};
